<template>
    <div class="letter-change-page">
        <!-- 标题与介绍 -->
        <ToolHeader :title="title" :subtitle="subtitle"/>

        <div class="content-box">
            <!-- 文本框左右布局 -->
            <div class="text-area">
                <!-- 输入框 -->
                <div class="text-box">
                    <span>输入文本：</span>
                    <el-input
                            v-model="inputText"
                            type="textarea"
                            rows="12"
                            placeholder="请输入要转换的文本"
                            class="input-text"
                    />
                </div>

                <!-- 输出框 -->
                <div class="text-box">
                    <span>输出文本：</span>
                    <el-input
                            v-model="outputText"
                            type="textarea"
                            rows="12"
                            readonly
                            class="output-text"
                    />
                    <el-button
                            type="primary"
                            class="copy-btn"
                            icon="el-icon-copy-document"
                            @click="copyToClipboard()"
                    >
                        复制
                    </el-button>
                </div>
            </div>

            <!-- 大小写切换单选按钮 -->
            <div class="button-container">
                <el-radio-group v-model="isUpperCase" size="default" class="case-radio-group">
                    <el-radio-button id="uppercase-btn" :label="true" class="case-radio">大写</el-radio-button>
                    <el-radio-button id="lowercase-btn" :label="false" class="case-radio">小写</el-radio-button>
                </el-radio-group>
            </div>

            <!-- 提示 -->
            <div class="notice">
                注意：点击复制按钮可复制结果。
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import ToolHeader from '@/components/ToolHeader.vue'
import {debounce} from 'lodash'
import {get, post} from '@/net/index.js'

// 标题和副标题
const title = ref('')
const subtitle = ref('')

// 输入输出
const inputText = ref('abc')
const outputText = ref('')

// 大小写状态，默认大写
const isUpperCase = ref(true)

// 获取工具介绍
function loadTitleAndSubtitle() {
    get(
        '/api/textTool/getInfo?path=letter_change',
        (data) => {
            if (data) {
                title.value = data.title || title.value
                subtitle.value = data.introduction || subtitle.value
            }
        },
        (msg) => {
            ElMessage.error('获取工具信息失败：' + msg)
        }
    )
}

// 调用后端接口转换文本
function convertText() {
    if (!inputText.value.trim()) {
        outputText.value = ''
        return
    }
    const type = isUpperCase.value ? 'upper' : 'lower'

    post(
        '/api/textTool/convertText',
        {text: inputText.value, type},
        (data) => {
            outputText.value = data.result || ''
        },
        (msg) => {
            ElMessage.error(msg || '转换失败')
        }
    )
}

// 防抖转换，防止频繁请求
const debouncedConvertText = debounce(convertText, 500)

// 监听输入文本防抖调用转换
watch(inputText, () => {
    debouncedConvertText()
})

// 监听大小写切换，立即调用转换
watch(isUpperCase, () => {
    convertText()
})

function copyToClipboard() {
    navigator.clipboard.writeText(outputText.value).then(() => {
        ElMessage.success('复制成功')
    }).catch(() => {
        ElMessage.error('复制失败')
    })
}

onMounted(() => {
    loadTitleAndSubtitle()
    convertText()
})
</script>

<style scoped>
.letter-change-page {
    width: 100%;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.content-box {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* 文本框左右结构 */
.text-area {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}

.text-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-text,
.output-text {
    width: 100%;
}

.copy-btn {
    align-self: flex-end;
    margin-top: 0.5rem;
}

.button-container {
    display: flex;
    justify-content: center;
}

/* 穿透 Element Plus 单选按钮样式，实现选中高亮蓝色 */
::v-deep(.el-radio-button__inner) {
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    user-select: none;
}

::v-deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #409eff;
    color: white;
    border-color: #409eff;
}

/* 提示样式 */
.notice {
    margin-top: 1rem;
    color: #999;
    font-size: 0.95rem;
    line-height: 1.5;
}
</style>